// 动画函数
function animate(ele,target){
    clearInterval(ele.timer);
    var step =ele.offsetLeft>target?-50:50;
    ele.timer=setInterval(() => {
        ele.style.left=ele.offsetLeft+step+"px";
        
        if(Math.abs(ele.offsetLeft-target)<Math.abs(step)){
            ele.style.left=target+"px"
            clearInterval(ele.timer)
        }
    }, 0);
}
// 取值

var oSpan=document.querySelectorAll(".num_list span")
var oPlay=document.querySelector('.play_auto')
var oUl=document.getElementById("ul_move")


//克隆第一张到最后一张
var oClone=oUl.children[0].cloneNode(true);
oUl.appendChild(oClone);
//调用autoplay 每三秒
var timer =setInterval(autoPlay,3000);

var imgIndex=0;
var potIndex=0;
var tmpIndex=0;
// 每个span绑定鼠标移入事件  并使得span下标, 图片的下标 和移入时的元素下标一至
for(i=0;i<oSpan.length;i++){
    oSpan[i].tmpIndex=i
    if(oSpan[i].innerHTML==1){
        oSpan[i].className="current";
    }
    oSpan[i].onmouseenter=function(){
       imgIndex=potIndex=this.tmpIndex-1;
       autoPlay();
    }
}

// 定义的动画函数
function autoPlay(){
    imgIndex++;
    potIndex++;
    //图片的变化范围1-5
    if(imgIndex>5){
        oUl.style.left="0px";imgIndex=1;
    }
    animate(oUl,-imgIndex*1920)
    //小圆点的变化范围 0-4  
    if(potIndex>4){
        potIndex=0
    }
    //小圆点的颜色变化
    for(i=0;i<oSpan.length;i++){
        if(oSpan[i].innerHTML==potIndex+1){
            oSpan[i].className="current";
        }
        else{
            oSpan[i].className
            =""
        }
    }

    
    //移入整个区域  清除定时器
    oPlay.onmouseenter=function(){
        clearInterval(timer)
    }
    // 移出时  设置定时器
    oPlay.onmouseleave=function(){
        timer=setInterval(autoPlay,3000)
    }

}

